<template>
  <button 
    :class="[
      'theme-button',
      sizeClass,
      variantClass,
      disabled && 'opacity-50 cursor-not-allowed'
    ]"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  size?: 'sm' | 'md' | 'lg'
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  variant: 'primary',
  disabled: false
})

const sizeClass = computed(() => {
  switch (props.size) {
    case 'sm': return 'px-3 py-1 text-sm'
    case 'lg': return 'px-6 py-3 text-lg'
    default: return 'px-4 py-2'
  }
})

const variantClass = computed(() => {
  switch (props.variant) {
    case 'secondary': return 'bg-gray-500 hover:bg-gray-600'
    case 'danger': return 'bg-red-500 hover:bg-red-600'
    default: return 'bg-blue-500 hover:bg-blue-600'
  }
})
</script>

<style>
@reference "../../styles/theme-reference.css";

.theme-button {
  /* 直接使用CSS变量 - 最佳性能 */
  background-color: var(--accent-color);
  color: white;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.theme-button:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.theme-button:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.theme-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>